<template>
 <!-- 一个的写法 -->
 <div class="charts-container" ref="container">charts Renderer</div>
 <!-- 多个的写法 -->
 <!-- <div :ref="(n)=>maps.n=n">charts Renderer1</div>
 <div :ref="(b)=>maps.b=b">charts Renderer2</div>
 <div :ref="(r)=>maps.r=r">charts Renderer3</div> -->
</template>

<script setup lang="ts">
import {use,init} from 'echarts'
import {BarChart,LineChart} from 'echarts/charts'
import {LegendComponent,TooltipComponent} from 'echarts/components';
import {onMounted,ref} from 'vue'
import {getChartsOption} from './ChartsDataTransformer'
import {CanvasRenderer} from 'echarts/renderers';

use([BarChart,LineChart,LegendComponent,TooltipComponent,CanvasRenderer])

const container=ref<HTMLDivElement|null>(null)
// 多个的写法
// const maps={}


onMounted(()=>{
  if(!container.value) return;
  const chartInstance= init(container.value)
  console.log("container",container);
  // 多个的写法
  // console.log("maps",maps);
  chartInstance.setOption(getChartsOption({
    type:"line",
    data:{
      labels:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],
      datasets:[
        {
          name:"A",
          data:[820,932,901,934,435,1234,1500]
        },
        {
          name:"B",
          data:[320,256,401,456,860,390,470]
        }
      ]
    }
  }))
})
</script>


<style scoped>
.charts-container{
  width: 1000px;
  height: 500px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}
</style>